<template>
  <view>
    <!-- <view class="bg-white activate" style="border-bottom: 0.1upx solid #e7e7e7;border-top: 0.5upx solid #e7e7e7;;">
			<view style="display: flex;align-items: center;">
				<text style="margin-right: 5upx;color: #feb2b2;" class="cuIcon-title line-red"></text>
				<text style="font-weight: bold;font-size: 110%;">优秀作品展示</text>
			</view>
    </view>-->
    <!--轮播-->
    <!-- <swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#feb2b2">
			<swiper-item v-for="(work,index) in works" :key="index" v-if="index<3" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image style="border: 0.5upx #EEEEEE solid;" :src="work.img"></image>
				</view>
			</swiper-item>
    </swiper>-->
    <!--轮播-->

    <!-- <view
      class="bg-white activate"
      style="border-bottom: 0.1upx solid #e7e7e7;border-top: 0.5upx solid #e7e7e7;;"
    >
      <view style="display: flex;align-items: center;">
        <text style="margin-right: 5upx;color: #feb2b2;" class="cuIcon-title line-red"></text>
        <text style="font-weight: bold;font-size: 110%;">作品投票</text>
      </view>
    </view> -->

    <view class="cu-bar justify-center bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold">作品投票</text>
          <text class="bg-olive" style="width:2rem"></text>
        </view>
    </view>

    <!--服务列表-->
    <view class="cu-list grid col-2 border" style="border: #EEEEEE solid 0.5upx;">
      <view
        style="position: relative;"
        class="flex align-center flex-direction cu-item"
        v-for="(work,i) in works"
        :key="i"
        @click="showModal(i)"
      >
        <image :src="work.imgUrl" />
        <view style="margin-bottom: 20upx;">{{work.title}}</view>
      </view>
    </view>
    <!--服务列表-->
    <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white">
          <view class="action text-blue" @tap="hideModal">取消</view>
          <view class="action text-green" @tap="exchange">确定</view>
        </view>
        <view class="padding-xl">
          <view>
            <!-- <text style="font-size:150%;font-weight: bold;">{{works[id].title}}</text> -->
            <text style="font-size:150%;font-weight: bold;">{{works[id].title}}</text>
          </view>
          <view>
            <text class="work-content text-gray">{{works[id].desc}}</text>
            <view @tap="ViewImage(works[id].imgUrl)">
              <image :src="works[id].imgUrl" />
            </view>
            <text class="work-content text-gray">目前票数:{{works[id].voteCount}}</text>
          </view>
          <view>
            <text class="work-content text-gray">tip:请按确定进行投票!</text>
          </view>
          <view class="align-center">
            <button
              @click="Increase"
              v-if="temp==1?'show':''"
              class="align-center cu-btn lines-olive round ld"
              style="font-size: 150%;"
            >投票</button>
            <button
              @click="error"
              v-if="temp==0?'show':''"
              class="align-center cu-btn lines-gray round ld"
              data-target="error"
              style="font-size: 150%;"
            >票数:{{voteCount}}</button>
            <view class="cu-modal" :class="modal=='error'?'show':''">
              <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                  <view class="content">错误</view>
                  <view class="action" @tap="close">
                    <text class="cuIcon-close text-red"></text>
                  </view>
                </view>
                <view class="padding-xl">你已经投过票了!</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-tabbar-height"></view>
    <view class="cu-bar foot bg-red" style="justify-content:center;" @click="handleClick">
      <text class="text-xxl" style="margin-left: 10upx;">参加活动</text>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import { uniIcons } from "@dcloudio/uni-ui";
import { uniFab } from "@dcloudio/uni-ui";
import fabBtn from "@/component/fabBtn";
export default {
  components: {
    uniSegmentedControl,
    uniIcons,
    uniFab,
    fabBtn
  },
  data() {
    return {
      //id
      id: 0,
      //错误弹窗控制
      modal: null,
      //temp
      temp: 1,
      //投票缓存
      voteCount: 0,
      //底部弹窗控制
      modalName: null,
      cardCur: 0,
      works: []
    };
  },

  mounted() {
    this.getWorks();
  },
  props: {
    myId: Number
  },
  watch: {
    myId() {
      console.log("watch id...");
      //this.getCourse();
    }
  },
  ready() {
    console.log("ready");
  },
  methods: {
    ViewImage(imgUrl) {
      uni.previewImage({
        urls: [imgUrl]
      });
    },
    handleClick() {
      uni.navigateTo({
        url: "./clock/index?id=" + this.myId
      });
    },
    cardSwiper(e) {
      this.cardCur = e.detail.current;
    },
    getWorks() {
      // var data = [
      //   {
      //     voteCount: 11,
      //     id: 1,
      //     title: "1号作品",
      //     content: "我写的什么玩意,我也不知道阿",
      //     img:
      //       "http://39.106.100.179:9999/group1/M00/00/00/J2pks175XHCAXC49AACYrBrsRsM205.jpg"
      //   }
      // ];

      this.request({
        url:
          this.apiServer +
          "/task/findActivitiesTaskByPId?pId=" +
          this.myId +
          "&skip=0&limit=50"
      }).then(res => {
        console.log(res);

        this.works = res.data;
      });
    },
    //底部窗口
    showModal(e) {
      this.modalName = "bottomModal";
      this.id = e;
      //console.log("--------------------"+this.works[this.id].id);
      this.voteCount = this.works[this.id].voteCount;
    },
    hideModal(e) {
      if (this.voteCount > this.works[this.id].voteCount) {
        this.temp = 1;
      }
      this.voteCount = 0;
      this.modalName = null;
    },

    Increase(e) {
      if (this.temp == 1) {
        this.voteCount += 1;
        this.temp = 0;
      }
    },
    exchange(e) {
      var that = this;
      this.request({
        url: this.apiServer + "/task/voteActivitiesTask",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          id: this.works[this.id].id,
          uId: uni.getStorageSync("user").id
        },
        success: res => {
          var t = that.works[that.id].voteCount - that.voteCount;
          that.works[that.id].voteCount -= t;
          that.voteCount = 0;
        },
        fail: res => {
          that.temp = 0;
          that.voteCount = that.works[that.id].voteCount;
        }
      }).then(res => {
        uni.showToast({
          duration: 1500,
          title: res.msg,
          icon: "none"
        });

        this.modalName = null;
      });
    },
    error(e) {
      if (this.voteCount == this.works[this.id].voteCount && this.temp == 0) {
        this.modal = e.currentTarget.dataset.target;
      }
    },
    close() {
      this.modal = null;
    }
  }
};
</script>
<style lang="scss" scoped>
.user-goldcoin {
  display: flex;
  align-items: center;
}

.user-id {
  display: flex;
  align-items: center;
}

.user-credit {
  font-size: 100%;
  font-weight: bold;
}

.user-name {
  font-size: 150%;
  font-weight: bold;
}

.content1 {
  padding: 30upx 30upx 30upx 30upx;
}

.user-logo {
  width: 160rpx;
  height: 160rpx;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  margin: 40rpx auto;
}

.activate {
  display: flex;
  justify-content: space-between;
  height: 90upx;
  align-items: center;
  padding-left: 20upx;
  padding-right: 20upx;
}
</style>
